<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>商品列表</title>
</head>
<body>
	<div layout:fragment="content">
 <link th:href="@{/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css}" rel="stylesheet" href="plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css"/>
<link th:href="@{/plugins/bootstrap-modal/css/bootstrap-modal.css}" rel="stylesheet" href="plugins/bootstrap-modal/css/bootstrap-modal.css"/>
<link th:href="@{/plugins/zTree/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet" href="plugins/zTree/css/zTreeStyle/zTreeStyle.css"/>
<script th:src="@{/plugins/zTree/js/jquery.ztree.core-3.5.js}" src="plugins/zTree/js/jquery.ztree.core-3.5.js" type="text/javascript"></script>

		<div class="row">
			<div class="table-toolbar col-md-12">
				<div class="table-toolbar col-md-12">
					<div class="btn-group pull-right"><a href="edit.html" th:href="@{/goods/goods/add}" id="Link_add" class="btn green">添加商品<i class="fa fa-plus"></i></a></div>
				</div>
				<div class="col-md-15 col-sm-13">
					<form class="form-inline" th:action="@{/goods/goods/index}" th:object="${goodsSearch}"  method="post" id="form_submit">
						<div class="form-group">
					            <select id="goodsBrandsId" name="goodsBrandsId" style="width:110px;" th:remove="none" class="form-control">
					            	<option value="">所有品牌</option>
					                <option th:each="eachValue : ${brands}" th:field="*{goodsBrandsId}" th:value="${eachValue.id}" th:text="${eachValue.name}"></option>
					            </select>	
					            <input type="hidden" id="hidden_goodsBrandsId" th:value="${goodsBrandsId}" />												
						</div>
							
							<!-- <div class="form-group">
					            <select id="goodsCategoryId" name="goodsCategoryId" style="width:110px;" th:remove="none" class="form-control">
					            	<option value="">所有分类</option>
					                <option th:each="eachValue : ${categorys}" th:field="*{goodsCategoryId}" th:value="${eachValue.id}" th:text="${eachValue.name}"></option>
					            </select>
					            <input type="hidden" id="hidden_goodsCategoryId" th:value="${goodsCategoryId}" />														
							</div> -->
							<div class="form-group">
				            <select th:field="*{goodsCategoryId}"  id="goodsCategoryId" name="goodsCategoryId" style="display:none" class="form-control" >
				                <option value="">所有分类</option>
				                <option   th:each="eachValue : ${categorys}"  th:value="${eachValue.id}"   th:text="${eachValue.name}" style="display:none"></option>
				            </select>
				            <button id="treebutton" class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown">
									分类 <i class="fa fa-angle-down"></i>
							</button>
							<div class="dropdown-menu dropdown-content input-large">
								<div id="category_tree" role="menu"></div>
							</div>
								
				            <input type="hidden" id="hidden_categoryid" th:value="${goodsCategoryId}" /> 														
							</div>
							
						 <div class="form-group">
								<select th:field="*{goodsDisplayed}" id="goodsDisplayed" name="goodsDisplayed"  style="width:80px;" th:remove="none" class="form-control">
									<option value="">全部</option>
					                <option th:value="true">上架</option>
					                <option th:value="false">下架</option>   
					            </select>	
					            <input type="hidden" id="hidden_goodsDisplayed"  th:value="${goodsDisplayed}" />				
						</div>	
						
						<div class="form-group">
						<label class="sr-only" for="keyword">keyword</label>
							<input type="text" name="keyword" style="width:80px;" th:field="*{keyword}" placeholder="关键字"  id="keyword" class="form-control" />
						</div> 

						<div class="form-group">
							<label class="sr-only" for="goodsUploadPerson">uploadPerson</label>
							<input type="text" name="goodsUploadPerson" style="width:80px;" th:field="*{goodsUploadPerson}" placeholder="上传人" id="goodsUploadPerson" class="form-control" />
						</div> 
						
						<div class="form-group" >
							<div class="col-md-4">
								<input id="goodsStartDate" name="goodsStartDate" style="width:110px;" th:field="*{goodsStartDate}" data-format="yyyy-MM-dd hh:mm:ss" placeholder="开始时间" class="form-control" type="text"></input>
							</div>
						</div>
						<div class="form-group"> 
							<div class="col-md-4">
								<input id="goodsEndDate" name="goodsEndDate" style="width:110px;" th:field="*{goodsEndDate}" data-format="yyyy-MM-dd hh:mm:ss" placeholder="结束时间" class="form-control" type="text"></input>
							</div>
						</div>
						
						<button type="button" id="bt_search" name="bt_search" class="btn green" onclick="checkDate();">
							<i class="fa  fa-search"></i>
						</button>
					</form>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div id="div_goods_grid" th:include="goods/goods/goods_table" >

				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script th:src="@{/plugins/jstree/dist/jstree.min.js}" src="plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
 <script th:inline="javascript">
	/*<![CDATA[*/
	           $(document).ready(function(){		
	
	var categoryid = $('#hidden_categoryid').val();
	
	$('#goodsCategoryId').children().each(function(index,element){
		if($(element).val() == goodsCategoryId) {				
			$(element).attr('selected','selected');												
		}			
	});	
	
		$('#treebutton').html($("#goodsCategoryId").find("option:selected").text() + '<i class="fa fa-angle-down"></i>');
		$("#goodsCategoryId").change(function(){$('#treebutton').html($("#goodsCategoryId").find("option:selected").text() + '<i class="fa fa-angle-down"></i>'); });
	
});
	           
 $('#category_tree').jstree({
            "core" : {
                'data' : {'url' : function (node) {return '/tree/category';}}
            }
        });
        
	    $('#category_tree').on('select_node.jstree', function(e,data) { 
	    	checkCat(data.node.id);       
	    });
	    
	    var result;
	    function getCategoryById(id,categories){   	
	    	$(categories).each(function() { 
	    		if(this.id == id)result = this; 
	    		console.log(this.id);
		    	if(result){
		    		console.log('find it' + result);
		    		return result;
		    	}else{
		    		console.log('not find ,try sub cat' + result);
		    		result = getCategoryById(id,this.children);
		    		return result;
		    	}
	    	});
			return result;
	    }
	    
	    function addSubCategoriesToArray(category,array){
	    	//console.log(category.children);
	    	if(category.children){
		    	$(category.children).each(function() {
		    		console.log(this);
		    		array[array.length] = this.id;	 
		    		console.log(this.children);   		
		    		if(this.children)addSubCategoriesToArray(this.children,array);
		    	});
	    	}
	    }
	    
function checkCat(id){

	   $("#goodsCategoryId option").each(function() { this.selected = (this.value == id); });
	   $("#goodsCategoryId").change();
	   $("#tree_modal").modal('hide');	
}
	 
   
    
	           
		$("#goodsStartDate").click(function(){
			WdatePicker({startDate:'%y-%M-01',dateFmt:'yyyy-MM-dd ',alwaysUseStartDate:true,readOnly:true});
		}).focus(function () {
            WdatePicker({startDate:'%y-%M-01 ',dateFmt:'yyyy-MM-dd ',alwaysUseStartDate:true,readOnly:true});
        });
		$("#goodsEndDate").click(function(){
			WdatePicker({startDate:'%y-%M-01',dateFmt:'yyyy-MM-dd ',alwaysUseStartDate:true,readOnly:true});
		}).focus(function () {
            WdatePicker({startDate:'%y-%M-01 ',dateFmt:'yyyy-MM-dd ',alwaysUseStartDate:true,readOnly:true});
        });
		
		KindEditor.ready(function(K) {
	        K.create('#textarea_content', {
	                uploadJson : '/upload',
	                allowFileManager : false
	     });
	});
		
		  
		  
		  function checkDate(){
			  var startTime=$("#goodsStartDate").val();  
			    var start=new Date(startTime.replace("-", "/").replace("-", "/"));  
			    var endTime=$("#goodsEndDate").val();  
			    var end=new Date(endTime.replace("-", "/").replace("-", "/"));  
			    if(end<start){  
			        alert("开始时间要小于结束时间"); 
			        return  false;
			    }  
			  $("#form_submit").submit();
		  }
	       
	           
	/*]]>*/
</script>
